<!--
 * @Description: 数泽MES
 * @Author: 数泽
 * @Date: 2023-10-27 16:08:02
-->
<script setup>
import {onMounted, ref, watch} from "vue";
import Lockr from "lockr";

defineOptions({
  name: "SzPaginationTwo"
})

const props = defineProps({
  currentPage: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  total: {
    type: Number,
    default: 0
  }
})

const emits = defineEmits(['update:currentPage', 'update:pageSize'])

const optionData = reactive({
  current: 1,
  size: 10,
  sizes: [10, 20, 30, 40, 50, 100]
})
const {current, size, sizes} = toRefs(optionData)

watch(() => props.currentPage, (val) => {
  optionData.current = val
}, {immediate: true})
watch(() => props.pageSize, (val) => {
  optionData.size = val
}, {immediate: true})

onMounted(() => {
  console.log("props.currentPage", props.currentPage)
  console.log("props.pageSize", props.pageSize)
})
/**
 * 更改当前页数
 * todo whf
 * size-change、current-change、prev-click、next-click
 * 以上事件不推荐使用（但由于兼容的原因仍然支持，在以后的版本中将会被删除）；
 * 如果要监听 current-page 和 page-size 的改变，使用 v-model 双向绑定是个更好的选择。
 */
watch(() => optionData.current, (value, oldValue) => {
  console.log("current", value)
  emits('update:currentPage', value)
})

/**
 * 更改每页展示数量
 */
watch(() => size, (value, oldValue) => {
  // 存储到localstorage
  Lockr.set('crmPageSizes', value)
  console.log("size", value)
  emits('update:pageSize', value)
})

function sizeChange(value) {
  console.log("sizeChange", value)
  Lockr.set('crmPageSizes', value)
  emits('update:pageSize', value)

}

function currentChange(value) {
  console.log("currentChange", value)
  emits('update:currentPage', value)

}

</script>

<template>
  <!-- size-change和current-change事件不再推荐使用。-->
  <!-- 以上事件不推荐使用（但由于兼容的原因仍然支持，在以后的版本中将会被删除）；如果要监听 current-page 和 page-size 的改变，使用 v-model 双向绑定是个更好的选择。-->
  <!-- total需要使用:绑定，即使是常量也不行。total 和 page-count 必须传一个-->
  <el-pagination v-model:page-size="size" v-model:current-page="current"
                 @size-change="sizeChange"
                 @current-change="currentChange"
                 :page-sizes="sizes"
                 :total="total"
                 :page-count="total"
                 :pager-count="5"
                 class="p-bar"
                 background
                 layout="prev, pager, next, sizes, total, jumper"/>
</template>

<style scoped lang="scss">

</style>